<template>
  <div class="demo">
    <el-button @click="getList" type="primary" >发送请求</el-button>
    <el-button @click="getImg" type="primary" >获取头像</el-button>
    <h4>求和为：{{ sumStore.sum }}</h4>
    <ul>
      <li v-for="item in wordList" :key="item.id">{{ item.content }}</li>
    </ul>
    <hr>
    <ul class="imgBox">
      <li v-for="item in avarList" :key="item.id">
        <img :src="item.url" alt="">
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
 import { ref,reactive}  from 'vue'
 import {nanoid} from 'nanoid'
 import axios from 'axios'
 // 引入对应的useXxxxxStore	
 import { useCountStore } from '@/store/count'

 const sumStore = useCountStore()

 
 let wordList = reactive([]) 
 let avarList = reactive([])
 let avarUrl = ref('')

 async function getList(){
  try {
    let {data} = await axios('https://api.uomg.com/api/rand.qinghua?format=json') 
    console.log(data)
    wordList.push({
      id:nanoid(),
      content:data.content
    })
  } catch (error) {
    console.log(error)
  }
 }

 function getImg (){ // https://api.uomg.com/api/rand.img3?sort=胖次猫&format=json
  axios('https://api.uomg.com/api/rand.img3?format=json').then(res=>{
    console.log(res.data.imgurl)
    avarList.push({
      id:nanoid(),
      url:res.data.imgurl
    })
    avarUrl.value = res.data.imgurl
  }).catch(err=>{console.log(err)})

 }

</script>

<style scoped>
.demo {
  background-color: #dbedf4;
  padding: 10px;
  box-shadow: 0 0 5px;
}
img{
  width: 100px;
}
.imgBox{
  display: flex;
}
</style>